<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动问题-高度塌陷(Floating issue - height collapse)</title>
  <!-- 
    在CSS中，浮动元素可能导致高度坍塌（height collapse）的问题，即父元素的高度无法包含浮动元素的高度，造成布局异常。
    浮动元素高度坍塌的一些常见情况和解决方法： 
 
      1. 浮动元素引起的高度坍塌： 
      - 父元素包含浮动元素时，如果没有清除浮动，父元素的高度可能无法正确计算，导致高度坍塌。 
      - 浮动元素脱离了正常文档流，父元素无法识别浮动元素的高度，导致父元素高度为0或不包含浮动元素。 
      
      2. 解决方法： 
        1. 使用clear属性清除浮动，可以通过在父元素中添加clear属性来解决高度坍塌问题。 
        2. 使用overflow属性：在父元素中添加overflow: hidden;或overflow: auto;可以触发BFC（块级格式化上下文），从而解决高度坍塌问题。 
        3. 使用伪元素清除浮动：通过在父元素的最后添加一个空的伪元素并清除浮动，也可以解决高度坍塌的问题。 
        4. 父元素也浮动：将父元素也设置为浮动，可以解决高度坍塌的问题。 
        5. 设置父元素的高度：将父元素的高度设置为一个固定的值，可以解决高度坍塌的问题。
        6. 设置父元素的display属性为flex或grid：将父元素设置为flex或grid布局，可以解决高度坍塌的问题。 
        7. 设置父元素的position属性为absolute或fixed：将父元素设置为绝对定位或固定定位，可以解决高度坍塌的问题。
   -->
  <style>
    .container {
      width: 1100px;
      /* border: 1px solid red; */
      /* 解决浮动塌陷问题1: height */
      /* height: 500px; */
      /* 解决浮动塌陷问题2: overflow */
      overflow: hidden;
      /* 解决浮动塌陷问题3: 伪元素清除浮动 */
      /* clear: both; */
      /* 解决浮动塌陷问题4: BFC */
      /* overflow: auto; */
      /* 解决浮动塌陷问题5: 伪元素清除浮动 */
      /* &::after {
        content: '';
        display: block;
        clear: both;
      } */
      /* 解决浮动塌陷问题6: 父元素也浮动 */
      /* float: left; */
    }

    /* 方案1 */
    .container-v1 .item {
      width: 221px;
      height: 168px;
      /* background-color: pink; */
      float: left;
      border: 1px solid #000;
      box-sizing: border-box;
      margin-left: -1px;
      background-color: saddlebrown;
    }

    /* 方案2 */
    .container-v2 .item {
      margin: 130px;
      width: 121px;
      height: 168px;
      float: left;
      background-color: skyblue;
      border: 1px solid #000;
      margin-right: -1px;
      box-sizing: border-box;
    }

    /* 最终方案 */
    .clear_fix::after {
      content: '';
      display: block;
      clear: both;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
  </style>
</head>

<body>

  <h3>方案1</h3>
  <div class="container container-v1 clear_fix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>

  <h3>方案2</h3>
  <div class="container container-v2 ">
    <div class="item">container-v2</div>
    <div class="item">container-v2</div>
    <div class="item">container-v2</div>
  </div>

</body>

</html>